<template>
  <div class='container'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form ref="form" label-width="120px" >
        <el-form-item label="学科" prop="subjectID">
          <el-select  placeholder="请选择活动区域">
            <el-option ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select  placeholder="请选择活动区域">
            <el-option ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select  placeholder="请选择活动区域">
            <el-option ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="province">
          <el-select  placeholder="请选择活动区域" style="margin-right: 5px; width: 198px" >
            <el-option ></el-option>
          </el-select>
          <el-select  placeholder="请选择活动区域" style="width: 198px">
            <el-option ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select  placeholder="请选择活动区域">
            <el-option ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group >
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group >
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="question">
          <quill-editor
            ref="myLQuillEditor"
            options="editorOption"
            class="editor">
          >
          </quill-editor>
        </el-form-item>
        <el-form-item label="选项">
          <!-- 单选模块 -->
          <el-radio-group style="width: 70%; display: block" >
            <!-- 1 -->
            <div class="flexBox" style="margin-bottom: 15px">
              <i class="imgClose el-icon-circle-close"></i>
              <el-radio >固定</el-radio>
              <el-input style="width: 300px; margin-right: 5px"></el-input>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:3000/upload"
                >
                <img class="avatar">
                <i class="avatar-uploader-icon imgText">上传图片</i>
              </el-upload>
            </div>
            <!-- 2 -->
            <div class="flexBox" style="margin-bottom: 15px">
              <i class="imgClose el-icon-circle-close"></i>
              <el-radio >固定</el-radio>
              <el-input style="width: 300px; margin-right: 5px"></el-input>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:3000/upload"
                >
                <img class="avatar">
                <i class="avatar-uploader-icon imgText">上传图片</i>
              </el-upload>
            </div>
            <!-- 3 -->
            <div class="flexBox" style="margin-bottom: 15px">
              <i class="imgClose el-icon-circle-close"></i>
              <el-radio >固定</el-radio>
              <el-input style="width: 300px; margin-right: 5px"></el-input>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:3000/upload"
                >
                <img class="avatar">
                <i class="avatar-uploader-icon imgText">上传图片</i>
              </el-upload>
            </div>
            <!-- 4 -->
            <div class="flexBox" style="margin-bottom: 15px">
              <i class="imgClose el-icon-circle-close"></i>
              <el-radio >固定</el-radio>
              <el-input style="width: 300px; margin-right: 5px"></el-input>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:3000/upload"
                >
                <img class="avatar">
                <i class="avatar-uploader-icon imgText">上传图片</i>
              </el-upload>
            </div>
          </el-radio-group>
          <el-button type="danger" style="margin-top: 20px" class="addBtn" >+增加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="解析视频" prop="videoURL">
          <el-input style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="答案解析" prop="answer">
          <quill-editor
            :options="editorOption"
            class="editor">
          >
          </quill-editor>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input type="textarea"  style="width:400px;" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="试题标签">
          <el-select multiple placeholder="请选择" @change="chooseTag">
            <el-option>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" >确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
// 定制toolbar
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ header: 1 }, { header: 2 }],
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }],
  [{ size: [] }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['link'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  name: 'NewQuestion',
  components: { quillEditor },
  data () {
    return {
      content: '',
      editorOption: {
        theme: 'snow',
        modules: {
          toolbar: toolbarOptions
        }
      }
    }
  }

}

</script>

<style scoped >
  ::v-deep .el-checkbox__label{
    width: 24px;
  }
  .el-radio {
    margin-right: 15px;
    /* width: 38px; */
    height: 36px;
    line-height: 36px;
    /* margin-right: 0; */
  }
  .chooseBox {
    margin-bottom: 20px !important;
  }
.avatar-uploader ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 60px;
    width: 100px;
  }
  .avatar-uploader ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 12px;
    color: #8c939d;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 60px;
    display: inline-block;
  }
  .avatar-uploader {
    display: inline-block;
    vertical-align: middle;
    height: 60px;
  }
  .flexBox {
    display: flex;
    /* justify-content: flex-center !important; */
    align-items: center;
    position: relative;
  }
  .addBtn {
    margin-top: 20px;
    width: 132px;
    height: 32px;
    padding: 9px 15px;
    font-size: 12px;
  }
  ::v-deep .ql-container {
    height: 201px !important;
  }
  .el-select {
    width: 400px;
  }
  .container{
    padding: 20px;
  }
  .flexCheckBox{
    display: flex;
    /* justify-content: flex-center !important; */
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    /* height: 60px; */
  }
  .el-checkbox {
    /* width: 53px; */
    margin-right: 15px;
  }
  .imgText{
    color: #303133;
    font-size: 14px;
    font-style: normal;
  }
  .imgClose{
    position: absolute;
    top: 0;
    left: 49%;
    transform: translate(50%, -50%);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center !important;
    font-size: 18px;
    color: #999;
    z-index: 999 !important;
  }
  .imgClose:hover{
    color: #409EFF;
  }
  .editor {
    width: 1000px;
  }
</style>
